<template>
	<view class="container">
		<button @click="chooseImage">选择本地照片</button>
		<image v-if="choosedImags.length" :src="choosedImags[0]" mode="widthFix" class="avatar"></image>
	</view>
</template>

<script>
	export default {
			data() {
				return {
					choosedImags: []
				}
			},
			methods: {
				chooseImage() {
					// 使用接口 uni.chooseImage ()
					uni.chooseImage({
						success: (res) => {
							this.choosedImags = res.tempFilePaths;
						}
					});
				},
				previewImage(images) {
					// 使用接口 uni.previewImage ()
					uni.previewImage({
						urls: images
					});
				}
			}
		}
</script>

<style scoped>
	.container {
		padding: 30rpx;
	}
	button {
		background: #007aff;
		color: #fff;
		padding: 15rpx 0;
		border-radius: 8rpx;
	}
	.avatar {
		width: 100%;
		margin-top: 20rpx;
		border-radius: 8rpx;
	}
</style>